<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预约挂号</title>
    <base th:href="@{/}">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/style1.css" />
    <script type="text/javascript" th:inline="javascript">
        function redirectToAppointment(day) {
            // 根据选择的星期跳转
            window.location.href = `/user/toAppointment?currentPage=1&mykey=${day}`;
        }
    </script>
</head>
<body>
<div th:insert="~{user/header}"></div>

<main id="main">

    <!--副标题-->
    <section class="breadcrumbs">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center">
                <h2 id="pageTitle">挂号</h2>
                <ol>
                    <li><a href="index.html">首页</a></li>
                    <li id="breadcrumbItem"><a href="#" ></a>挂号</li>
                </ol>
            </div>
        </div>
    </section>
</main>
<section class="inner-page">
    <div class="container">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">所有医生</h3>
            </div>
            <div class="card-body">
                <div style="display: flex;">
                    <div>
                        <label for="detail">选择挂号星期：</label>
                        <select id="detail" name="detail" onchange="redirectToAppointment(this.value)">
                            <option value="0">请选择</option>
                            <option value="1">星期一</option>
                            <option value="2">星期二</option>
                            <option value="3">星期三</option>
                            <option value="4">星期四</option>
                            <option value="5">星期五</option>
                            <option value="6">星期六</option>
                            <option value="7">星期日</option>
                        </select>
                    </div>
                    <div>
                        <form action="user/searchfromall" class="navbar-form navbar-right" style="display: flex;margin-left: 10px">
                            <div class="form-group" >
                                <input type="text" class="form-control" name="mykey" placeholder="请输入关键词" style="height: 40px; margin-top:-1px ;" />
                            </div>
                            <button type="submit" class="btnn" style="margin-top: -1px; height: 40px;" >搜索</button>
                        </form>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table text-center">

                        <tbody class="text-center">
                        <table class="table table-bordered table-hover">
                            <tbody class="text-center" style="align-content: center">
                            <tr th:each="gty:${appointmentList}" >
                                <td class="card" style="background-color: rgb(236, 248, 253);  width: 300px;height: 350px">
                                    <div style="text-align: center;">
                                        <img th:src="${gty.tx}" alt="头像" style="width: 100px; height: 100px; border-radius: 50%;">
                                    </div>
                                    <div style="text-align: center; margin-top: 10px; font-weight: 550;">
                                        <span th:text="${gty.name}"></span>
                                    </div>
                                    <div style="padding: 0px 10px; margin-top: 20px; color: rgb(53, 53, 35); min-height: 80px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;">
                                        <span th:text="${gty.note}"></span>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
<script src="js/main.js"></script>
</body>
</html>
